﻿<!DOCTYPE html>
<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8" >
    <meta name="description" content="<%= productDescription %>" >
    <meta name="format-detection" content="telephone=no" >
    <meta name="msapplication-tap-highlight" content="no" >
    <meta
      name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
    >
    <meta name="theme-color" content="#FF720E" >
    <meta name="apple-mobile-web-app-capable" content="yes" >
    <meta name="apple-mobile-web-app-status-bar-style" content="default" >
    <link rel="icon" type="image/png" sizes="128x128" href="static/img/icons/favicon-128x128.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="static/img/icons/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="static/img/icons/favicon-16x16.png" />
    <link rel="icon" type="image/ico" href="favicon.ico" />
  </head>
  <body>
    <!-- quasar:entry-point -->
  </body>
  <script>
    ;(function () {
      const wrapper = document.createElement('div')
      wrapper.innerHTML = [
        // 首屏加载动画 https://connoratherton.com/loaders
        '<div class="ball-scale-ripple-multiple" style="position: fixed; z-index: 10000; left: 50%; top: 50%">' + '  <div></div>' + '  <div></div>' + '  <div></div>' + '</div>',
        '<style>',
        '.ball-scale-ripple-multiple {',
        '  position: relative;',
        '  -webkit-transform: translateY(-25px);',
        '  transform: translateY(-25px);',
        '}',
        '@-webkit-keyframes ball-scale-ripple-multiple {',
        '  0% {',
        '    -webkit-transform: scale(0.1);',
        '    transform: scale(0.1);',
        '    opacity: 1;',
        '  }',
        '  70% {',
        '    -webkit-transform: scale(1);',
        '    transform: scale(1);',
        '    opacity: 0.7;',
        '  }',
        '  100% {',
        '    opacity: 0;',
        '  }',
        '}',
        '@keyframes ball-scale-ripple-multiple {',
        '  0% {',
        '    -webkit-transform: scale(0.1);',
        '    transform: scale(0.1);',
        '    opacity: 1;',
        '  }',
        '  70% {',
        '    -webkit-transform: scale(1);',
        '    transform: scale(1);',
        '    opacity: 0.7;',
        '  }',
        '  100% {',
        '    opacity: 0;',
        '  }',
        '}',
        '.ball-scale-ripple-multiple {',
        '  position: relative;',
        '  -webkit-transform: translateY(-25px);',
        '  transform: translateY(-25px);',
        '}',
        '.ball-scale-ripple-multiple div:nth-child(0) {',
        '  -webkit-animation-delay: -0.8s;',
        '  animation-delay: -0.8s;',
        '}',
        '.ball-scale-ripple-multiple div:nth-child(1) {',
        '  -webkit-animation-delay: -0.6s;',
        '  animation-delay: -0.6s;',
        '}',
        '.ball-scale-ripple-multiple div:nth-child(2) {',
        '  -webkit-animation-delay: -0.4s;',
        '  animation-delay: -0.4s;',
        '}',
        '.ball-scale-ripple-multiple div:nth-child(3) {',
        '  -webkit-animation-delay: -0.2s;',
        '  animation-delay: -0.2s;',
        '}',
        '.ball-scale-ripple-multiple div {',
        '  -webkit-animation-fill-mode: both;',
        '  animation-fill-mode: both;',
        '  position: absolute;',
        '  top: -60px;',
        '  left: -60px;',
        '  width: 120px;',
        '  height: 120px;',
        '  border-radius: 100%;',
        '  border: 2px solid #03ecf7;',
        '  -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);',
        '  animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);',
        '}',
        '</style>'
      ].join('')
      document.body.appendChild(wrapper)
      document.addEventListener('DOMContentLoaded', function __onload__() {
        document.body.removeChild(wrapper)
      })
    })()
  </script>
</html>
